<template>
  <div>
    <div class="container">
      <!-- 左侧轮播图区域 -->
      <div class="left">
        <div class="detail-swiper">
          <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide class="swiper-item">
              <img :src="product.coverImg" alt="" class="swiper-img" />
            </swiper-slide>
            
            <!-- Optional controls -->
            <!-- 轮播图分页器 -->
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      <!-- 右侧商品参数区域 -->
      <div class="right">
        <!-- 顶部标题区域 -->
        <div class="header">
          <h2>{{ product.goodsName }}</h2>
          <p class="now-price">{{ product.sellPrice }}元</p>
        </div>
        <!-- 收获地址区域 -->
        <div class="address">
          <span>收货地址：</span>
          <el-select v-model="good.consigneeAddress" clearable placeholder="请选择">
            <el-option
              v-for="item in addressList"
              :key="item.address"
              :label="item.address"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="address">
          <span>转卖描述：</span>
          <span class="change">{{product.describeTxt}}</span>
        </div>
        <div class="address">
          <span>分类所属:</span>
          <span class="change">{{product.typeName}}</span>
        </div>
        <!-- 选择版本区域 -->
        <!-- <div class="virsion">
          <div class="title">选择数量</div>
          <div class="choose">
            <el-input-number v-model="good.num" @change="numChange" :min="1" :max="100" label="商品个数"></el-input-number>
          </div>
        </div> -->
        <!-- 总计区域 -->
        <div class="total">
          <div class="top">
            <div>
              <span class="name">{{ product.goodsName }} </span>
              <span class="colors">数量： {{product.amount
}}</span>
            </div>
            <div>
              单价：
              <span class="lowprice">{{ product.sellPrice }}元</span>
            </div>
          </div>
          <p class="totalprice">总计：{{total}}元</p>
        </div>
        <!-- 支付区域 -->
        <div class="shopcart">
          <el-button type="warning" :disabled="canBuy" @click="epay">立即付款</el-button>
          <el-button :icon="isCollect ? 'el-icon-star-on' : 'el-icon-star-off'" @click="collectControl(isCollect)">{{isCollect ? '取消收藏' : '收藏'}}</el-button>
        </div>
      </div>
    </div>
    <div class="comment-box">
      <div>
        <h2>商品评论</h2>
        <div class="comment-flex">
          <el-input
            type="textarea"
            placeholder="请输入评论"
            v-model="comment"
            maxlength="30"
            show-word-limit
          ></el-input>
          <el-button type="warning" @click="addComment" style="margin-left: 50px">发布</el-button>
        </div>
      </div>
      <div class="comment-list" v-if="commentList.length > 0">
        <div class="comment-item" v-for="(item, index) in commentList" :key="index">
          <el-card shadow="hover">
            <span>{{item.userNickName}}：</span>
            <el-divider></el-divider>
            <p style="text-indent: 2rem">{{item.content}}</p>
            <p style="text-align: right;margin-top: 10px">发表日期：{{item.createTime | timeFilter}}</p>
          </el-card>
        </div>
      </div>
      <show-no-data v-else></show-no-data>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import ShowNoData from "components/nodata/ShowNoData"
export default {
  name: "detail",
  data() {
    return {
      comment: '', // 评论
      commentList: [], // 评论列表
      addressList: [], // 收货地址列表
      product: {},
      proId: "",
      good: {
        id: 0,
        consigneeAddress: '',
        consigneePhone: '',
        consigneeName: ''
      },
      swiperOption: {
        // 设置分页器
        pagination: ".swiper-pagination",
        // 分页器是否可点击
        paginationClickable: true,
        // 设置自动播放且设置轮播间隔时间duration
        autoplay: 3000,
        // 滑动播放速度
        speed: 1000,
        // 前一个
        prevButton: ".swiper-button-prev",
        // 后一个
        nextButton: ".swiper-button-next",
      }
    };
  },
  computed: {
    ...mapState(['user', 'collect']),
    total () {
      return this.product.sellPrice * this.product.amount
    },
    isCollect () {
      return this.collect.some(item => Number(item.goodsId) === Number(this.proId))
    },
    canBuy () {
      return this.product.amount <= 0 
    }
  },
  filters: {
    timeFilter (val) {
      return val.match(/.+(?=\.)/g)[0].replace('T', ' ')
    }
  },
  components: {
    swiper,
    swiperSlide,
    ShowNoData
  },
  created() {
    // 获取地址栏中的产品ID
    this.proId = this.$route.params.id;
    // 让页面滚动到顶部
    window.scrollTo(0, 0);
  },
  mounted() {
    // 发送请求获取该id对应的商品信息
    this.getProductInfo()
    this.getAddressList()
    this.getCommentByShop()
  },
  methods: {
    ...mapMutations(['setCollect']),
    /**
     * 添加评论
     */
    addComment () {
      let params = {
        userId: this.user.id,
        userNickName: this.user.nickName,
        goodsId: this.proId,
        goodsSerialNumber: this.product.serialNumber,
        content: this.comment
      }
      this.$api.shop.addComment(params).then(res => {
        if (res.code === 200) {
          this.comment = ''
          this.getCommentByShop()
        }
      })
    },
    /**
     * 获取当前商品的评论
     */
    getCommentByShop () {
      let query = {
        goodsId: this.proId
      }
      this.$api.shop.getCommentByShop(query).then(res => {
        if (res.code === 200) {
          this.commentList = res.data
        }
      })
    },
    /**
     * 获取收货地址
     */
    getAddressList () {
      let query = {
        userId: this.user.id
      }
      this.$api.cart.getAddressList(query).then(res => {
        if (res.code === 200) {
          this.addressList = res.data
        }
      })
    },
    /**
     * 获取我的收藏
     */
    getMyCollect () {
      let query = {
        userId: this.user.id
      }
      this.$api.daity.getCollectList(query).then(res => {
        if (res.code === 200) {
          this.setCollect(res.data)
        }
      })
    },
    /**
     * 收藏或取消收藏
     */
    collectControl (flag) {
      if (flag) {
        let params = {
          id: this.collect.filter(item => Number(item.goodsId) === Number(this.proId))[0].id
        }
        this.$api.daity.deleteCollect(params).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '取消收藏成功'
            })
            this.getMyCollect()
          }
        })
      } else {
        let params = {
          userId: this.user.id,
          goodsId: this.proId
        }
        this.$api.daity.addCollect(params).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '收藏成功'
            })
            this.getMyCollect()
          }
        })
      }
    },
    /**
     * 立即付款
     */
    epay () {
      if (!this.good.consigneeAddress) {
        this.$message({
          type:'warning',
          message: '未选择收货地址'
        })
        return
      }
      let selects = this.addressList.filter(item => item.id === this.good.consigneeAddress)[0]
      let orderList = [{
        userId: this.user.id,
        goodsSerialNumber: this.product.serialNumber,
        amount: this.product.amount,
        totalMoney: this.total,
        consigneeAddress: selects.address,
        consigneePhone: selects.consigneePhone,
        consigneeName: selects.consigneeName
      }]
      let params = {
        orderList: orderList
      }
      this.$api.cart.epay(params).then(res => {
        if (res.code === 200) {
          if (res.data.code) {
            this.$router.push({
              path: '/order',
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.msg
            })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    /**
     * 获取商品详情
     */
    getProductInfo() {
      let query = {
        goodsId: this.proId
      }
      this.$api.shop.getShop(query).then(res => {
        if (res.code === 200) {
          this.product = res.data
          this.addClick(res.data.clickNum)
        }
      })
    },
    /**
     * 点击数+1
     */
    addClick (clickNum) {
       let params = {
        id: Number(this.proId),
        clickNum: clickNum + 1
      }
      this.$api.shop.addClickNum(params).then(res => {
        if (res.code === 200) {
        }
      })
    },
    /**
     * 数量修改
     */
    numChange (value) {
    },
  },
};
</script>
<style scoped>
.detail-swiper {
  width: 550px;
  height: 550px;
  margin-top: 100px;
  overflow: hidden;
  margin-left: 40px;
}
.detail-swiper img {
  width: 100%;
}
.container {
  display: flex;
  /* height: 870px; */
}
.left {
  flex: 1;
  /* background-color: goldenrod; */
}
.right {
  flex: 1;
  /* background-color: indianred; */
  padding: 0 20px;
}
.header h2 {
  font-size: 28px;
  color: #333333;
  margin: 20px 0 10px;
}
.header {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.header .desc {
  font-size: 14px;
  color: #999;
  line-height: 20px;
}
.color {
  color: #ff6600;
  margin-top: 15px;
  font-weight: 600;
}
.now-price {
  font-size: 16px;
  color: #ff6600;
  margin-top: 4px;
  font-weight: 600;
  height: 20px;
  line-height: 20px;
}
.now-price span {
  color: #999;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 6px;
}
.address {
  /* height: 108px; */
  background-color: #fafafa;
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
}
.address span {
  font-size: 14px;
  margin-right: 15px;
}
.address span.change {
  color: #ff6600;
}
.address p {
  color: #ff6600;
  font-size: 14px;
  margin-top: 10px;
}
.virsion {
  margin-top: 20px;
}
.virsion .title {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10px;
}
.virsion .choose {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.virsion .choose .btn {
  width: 285px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e5e5e5;
}
.active {
  border: 1px solid #ff6600 !important;
  color: #ff6600;
}
.virsion .choose .btn .price {
  padding: 0 10px;
}
.choosecolor {
  margin-top: 20px;
}
.choosecolor .title {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10px;
}
.choosecolor .choose .btn {
  width: 285px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #ff6600;
  cursor: pointer;
}
.shopcart {
  margin-top: 20px;
  display: flex;
  color: #fff;
  font-size: 16px;
  line-height: 54px;
  text-align: center;
}
.shopcart .button {
  width: 300px;
  height: 54px;
  background-color: #ff6600;
  cursor: pointer;
}
.shopcart .like {
  width: 150px;
  height: 54px;
  background-color: #ff6600;
  margin-left: 20px;
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
}

.total {
  height: 108px;
  background-color: #fafafa;
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
}
.total .top {
  display: flex;
  justify-content: space-between;
  color: #333333;
}
.total .top .highprice {
  text-decoration: line-through;
  padding-left: 6px;
}
.totalprice {
  color: #ff6600;
  font-weight: 600;
  font-size: 18px;
  margin-top: 10px;
}
.comment-box{
  width: 50%;
  margin: 20px auto;
}
.comment-item{
  margin: 10px 0;
}
.comment-flex{
  margin-top: 20px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
</style>
